import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";

import { Layout, Button, theme } from "antd";

import { useSelector, useDispatch } from "react-redux";

import { changeCollapsed } from "../store";

// interface PropType {
//   collapsed: boolean;
//   onChangeCollapsed: () => void;
// }

const Index = () => {
  const collapsed = useSelector((state: any) => state.home.collapsed);
  const dispatch = useDispatch();

  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Layout.Header style={{ padding: 0, background: colorBgContainer }}>
      <Button
        type="text"
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => dispatch(changeCollapsed())}
        style={{
          fontSize: "16px",
          width: 64,
          height: 64,
        }}
      />
      {/* <span>{value}</span> */}
    </Layout.Header>
  );
};

export default Index;
